const path = require('path');

module.exports = {
    entry: {
        idx: './src/idx.js'
    },
    output: {
	filename: '[name].[chunkHash].js',
	path: path.resolve(__dirname, './dist/'),
        publicPath: './dist/'
    },
    module: {
        rules:[
	    {
		test: /\.css$/,
		use: [{
		    loader: 'style-loader',
		    //style-loader options
		    //如果代码内有多个import css 会产生多个style标签所以需要合并
		    options: {
			// 插入到指定元素内
			insertInto: '#app',
			// 合并多个style为一个
			singleton: true,
			// 这个路径是css变形的函数
			transform: './css.transform.js'

		    } 	    
	
		    // loader: 'style-loader/url'
		    
		    // 控制样式插入还是不插入页面中
		    // 页面中可以 import base from './a.css'
		    // import b from './b.css'
		    // base.use() 样式显示 使用
		    // base.unuse() 样式不显示 不使用  可以被浏览器运行环境调用  if else 控制的。做动态加载样式换皮肤很好用。
		    //loader: 'style-loader/useable'

		},{
		    // 注意顺序越放在后面的先执行，从下往上执行
 		    loader: 'css-loader',
 		    options: {
			// 压缩我们的css
			minimize: true,
			// 打开css modules
			modules: true,
			// 定义模块化css名字的编译规则
			// localIdentName: '[path][name]_[local]--[hash:base64:5]'
			// path:css路径
			// name css 文件名字
			// local 样式的名称class名称
			// 根据前面这些东西的一个编码
			// src-css-k_apps--2CY_y 
			// path src-css- name k local apps 后面的是hash
			localIdentName: '[path][name]_[local]--[hash:base64:5]'
		    }    
		    // 对应style-loader/url/useable 需要一个file-loader
		    //loader: 'file-loader'
		}]
	    }
	]
    }
}
